<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 
      1.相同样式优先级
        当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
      2.内部样式与外部样式
        内部样式与外部样式优先级相同，如果设置了相同样式，那么后写入的引入方式优先级高
      3.单一样式优先级
        行内样式 > id选择器 > 类选择器 > 标签 > 通配符 > 继承
      4.权重
        样式            权重
      style行间	        1000
        id	            100
      class	            10
       tag	             1
        *	               0
      5.!important
        提升样式优先级，非规范方式，不建议使用。
        注意：
        1. 另外，!important也不能针对继承的属性进行优先级的提升。
        2. 如果有多个!important,那么还是会按照优先级  

      6. 标签+类 >单类

      7.群组优先级
        群组选择器，就是同时对几个选择器进行相同的操作
        群组选择器与单一选择器优先级相同，靠后写的优先级高

      8.层次优先级
        1)权重比较      
            #id .class div p      100+10+1+1
            body .class #div1 p   1+10+100+1
              这样就是权重相同

        2)均分比较
             #id .class div p        
            body .class #div1 p   
                这种方式就是说相同权重的相约掉
        层次选择器尽量写在三层以内。
   -->
   <style>
     /* 1.相同样式优先级 */
     /* div{
       color: blue;
      }
      div{
        width: 100px;
        height: 100px;
        color: red;
      } */
      /*  2.内部样式与外部样式 */
      /* div{
        width: 100px;
        height: 100px;
        color: red;
      } */

      /* 3.单一样式优先级
         4.权重
         5.!important
      */
      /* #topDiv{
        color: red !important;
      }
      *{
        color: yellow ;
      }
      div{
        color: blue ;
      }
      .classDiv{
        color: green ;
      }
      #idDiv{
        color: gray;
      } */

      /* 6. 标签+类 >单类 */ 
      /* div.div1{
        color: yellow;
      }
      .div1{
        color: red;
      } */
      /* 7.群组优先级 */
      /* div,span,p{
        color: red;
      }
      div{
        color: green;
      } */

      /* 8层次优先级 */
      body div .class1 #id2 p{
        color: green;
      }
      #id1 .class1 div p{
        color: red;
      }

      
    </style>
    <!-- 2.内部样式与外部样式  -->
    <!-- <link rel="stylesheet" href="./common.css"> -->
    

</head>
<body>
  <!-- 1.相同样式优先级
       2.内部样式与外部样式
 -->
    <!-- <divdddddddd></div> -->
      <!-- 3.单一样式优先级
           4.权重  
           5.!important
      -->
      <!-- <div id="topDiv">
        <div id="idDiv" class="classDiv" 
        style="color: black;"
              >dddddddd
            </div>
      </div> -->
      
      <!-- 6. 标签+类 >单类 
          7.群组优先级-->
      <!-- <div class="div1">qqqqqqqq</div>
      <p>rrrrrrrr</p>
       <span>gggggg</span> -->
       
        <!-- 8  层次优先级 -->
       <div id="id1">
         <div class="class1">
           <div id="id2">
             <p>11111111111</p>
           </div>
         </div>
       </div>

</body>
</html>